/*  -- flex弹性布局 -- */

.flex {
	display: flex;
}

.basis-xs {
	flex-basis: 20%;
}

.basis-sm {
	flex-basis: 40%;
}

.basis-df {
	flex-basis: 50%;
}

.basis-lg {
	flex-basis: 60%;
}

.basis-xl {
	flex-basis: 80%;
}

.flex1,
.flex-sub {
	flex: 1;
}

.flex-twice {
	flex: 2;
}

.flex-treble {
	flex: 3;
}

.flex-direction-column {
	flex-direction: column;
	.flex1 {
		flex: inherit;
	}
}

.flex-direction-row-reverse {
	flex-direction: row-reverse;
}

.flex-direction-column-reverse {
	flex-direction: column-reverse;
	.flex1 {
		flex: inherit;
	}
}

.flex-wrap {
	flex-wrap: wrap;
}
.flex-nowrap {
	flex-wrap: nowrap;
}
.flex-wrap-reverse {
	flex-wrap: wrap-reverse;
}

.align-start,
.items-start {
	align-items: flex-start;
}

.align-end,
.items-end {
	align-items: flex-end;
}

.align-center,
.items-center {
	align-items: center;
}

.align-stretch,
.items-stretch {
	align-items: stretch;
}
.align-baseline,
.items-baseline {
	align-items: baseline;
}

.self-start {
	align-self: flex-start;
}

.self-center {
	align-self: flex-center;
}

.self-end {
	align-self: flex-end;
}

.self-stretch {
	align-self: stretch;
}

.align-stretch {
	align-items: stretch;
}

.justify-start {
	justify-content: flex-start;
}

.justify-end {
	justify-content: flex-end;
}

.justify-center {
	justify-content: center;
}

.justify-between {
	justify-content: space-between;
}

.justify-around {
	justify-content: space-around;
}
.items-end {
	align-items: flex-end;
}
.scroll-view {
	overflow-x: auto;
	flex-wrap: nowrap;
	display: flex;
	flex-direction: row !important;
	> .flex {
		overflow-x: auto;
	}
	[class*='diygw-col-'] {
		flex-shrink: 0;
	}
}
.diy-table {
	border: 1px solid #ebeef5;
	border-width: 1px 0 0 1px;
	width: 100%;

	td,
	th {
		border: 1px solid #ebeef5;
		border-width: 0 1px 1px 0;
		text-align: center;
		font-size: 14px;

		.el-form-item {
			margin-bottom: 0px;
		}
		.el-form-item__content {
			padding-right: 0px !important;
		}
	}

	td {
		padding: 8px 5px;

		.el-form-item {
			margin: 0px;
			.el-form-item__content {
				padding-right: 0;
			}
		}
		.el-form-item__content {
			padding-right: 0px !important;
		}
		.el-input__inner {
			padding-right: 15px;
		}

		[class^='el-icon-'] {
			font-size: 14px;
			margin-right: 5px;
		}

		&.text-left {
			text-align: left;
		}
	}

	th {
		padding: 8px 5px;
		font-weight: normal;
	}

	.el-upload--picture-card {
		width: 40px;
		height: 40px;
		line-height: 48px;
	}

	&.diy-skutable .sku-input-number {
		width: 100px;
	}
	&.diy-skutable td .el-input__inner {
		padding-right: 0px !important;
	}
}
